<template>
	<el-select
		:value="value"
		:filterable="true"
		clearable
		:remote="true"
		:reserve-keyword="true"
		:remote-method="remoteMethod"
		:loading="loading"
		:placeholder="placeholder"
		@change="change"
	>
		<el-option
			v-for="item in options"
			:key="item.userId"
			:label="item.label"
			:value="item.userId"
		/>
	</el-select>
</template>

<script>
    const Api = nlapp.GlobalLibraries.common;
	export default {
		props: {
			// 员工id,支持v-model
			value: {
				type: String,
				default: ""
			},
            placeholder:{
                type:String,
                default:'请输入姓名'
            }
		},
		data() {
			return {
				loading: false,
				options: []
			};
		},
        created(){
            this.value && this.remoteMethod('',this.value);
        },
		methods: {
			/**
             * 远程搜索 支持姓名和ID查询
             */
            remoteMethod(userName,userId) {
                    if(!userName && !userId) {
                        return;
                    }
                    let params = {};
                    if(userId) {
                        params.userId = userId;
                    }
                    if(userName){
                        params.userName = userName;
                    }
                    this.options = Api.getEeListByUserNameSync({
                        ...params
                    }).map(owner => {
                        owner.label = owner.userName + ' - ' + owner.schoolName;
                        return owner;
                    });
            },
			change(data) {
				this.$emit("input", data);
				this.$emit("change", data);
			},
			api_getOptions() {
				return this.options;
			}
		}
	};
</script>
